<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8">
        <meta name="format-detection" content="telephone=no" />
		<title></title>
		
		<style type="text/css">
			/* reset style */
			html,
			body {
				width: 100%;
				height: 100%;
                font-family: "微软雅黑";
				overflow: hidden;
			}
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.mainbox {
				width: 100%;
				height: 100%;
				overflow-x: hidden;
				overflow-y: auto;
			}
			
			.desc {
				position: relative;
				width: 1000px;
				margin: 0 auto;
				height: 220px;
			}
			.desc h1 {
				padding-top: 20px;
				text-align: center;
			}
			.desc P {
				margin-left: 450px;
				font-size: 18px;
			}
			.reset {
				position: absolute;
				display: none;
				top: 80px;
				left: 20px;
				width: 150px;
				height: 50px;
				border: 1px solid #0099FF;
				color: #0099FF;
				text-align: center;
				line-height: 50px;
				border-radius: 10px;
			}
			.dus {
				position: absolute;
				top: 0;
				left: 200px;
				width: 200px;
				height: 200px;
				margin: 10px;
				border-radius: 50%;
				background: radial-gradient(center center , ellipse cover , rgb(255, 255, 255) 6% , rgb(45, 168, 255) 62% , rgb(4, 161, 255) 78%);
				background: -o-radial-gradient(center center , ellipse cover , rgb(255, 255, 255) 6% , rgb(45, 168, 255) 62% , rgb(4, 161, 255) 78%);
				background: -ms-radial-gradient(center center , ellipse cover , rgb(255, 255, 255) 6% , rgb(45, 168, 255) 62% , rgb(4, 161, 255) 78%);
				background: -moz-radial-gradient(center center , ellipse cover , rgb(255, 255, 255) 6% , rgb(45, 168, 255) 62% , rgb(4, 161, 255) 78%);
				background: -webkit-radial-gradient(center center , ellipse cover , rgb(255, 255, 255) 6% , rgb(45, 168, 255) 62% , rgb(4, 161, 255) 78%);
			}
			
			.icons {
				border: 1px solid #AAAAAA;
				width: 1160px;
				margin: 0 auto;
			}
			.icon-3x {
				position: relative;
				display: inline-block !important;
				width: 80px !important;
				padding-left: 25px;
				margin-bottom: 10px;
			}
			.icon-3x span{
				position: absolute;
				left: 0;
				top: 10px;
				font-size: 18px;
			}
			
			.dus i {
				display: block;
				width: 100% !important;
				line-height: 200px;
				text-align: center;
				-webkit-transform: scale(1.5);
				-moz-transform: scale(1.5);
				transform: scale(1.5);
			}
		</style>
			
		
		<link href="//cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
		
	</head>
	<body>
		
		<div class="mainbox">
			
			<div class="desc">
				<div class="reset">重新开始</div>
				<div class="dus">
					<i class='icon-5x'></i>
				</div>
				<h1>读心术</h1>
				<p>
					规则：心中任意选一个两位数（10-99的数字）<br />
					然后 用 这个数字去减去这个数字的十位和个位，<br />
					例如：62-6-2=54，那就去找54对应的图形，并牢记！<br />
					点击圆圈获取得知你心中的图形！
				</p>
			</div>
			
			<div class="icons"></div>
				
			
		</div>
			
	</body>
	

	<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript">
		
		window.onload = function(){
				
			
			function rdm(min, max){
				return Math.floor(Math.random() * (max - min)) + min;
			}
			
			var icon15 = [];
			
			start();
			function start(){
				
				var icons = ["book","cloud","female","lock","compass","yen","linux","apple","android","bug","anchor","camera","eye-open","frown","heart","music","search","star","usd","github","cut","magnet","key","globe","gamepad","windows"];
				var color = ["#FF4848","#FFB038","#40E639","#24E1F3","#2EB8FF","#AF6EFF","#F052FF","#FF5799"];
				
				var box = $(".icons");
				box.empty();
				
				icon15 = [];
				
				for (var j = 0 ; j < 15 ; j++) {
					var r = rdm(0, icons.length);
					icon15.push(icons[r]);
					icons.splice(r,1);
				}
				console.log(icon15)
				
				
				for (var i = 1; i < 100 ; i++) {
					var html = "<i class='icon-3x icon-"+icon15[rdm(1,15)]+"' style='color:"+color[rdm(0,8)]+"'><span>"+(i)+"</span></i>"
					box.append(html);
				}
				
				var is = $(".icons > i");
				for (var i = 1; i < 10 ;i++) {
					is.eq(i*9-1).removeClass().addClass("icon-3x").addClass("icon-"+icon15[0]);
				}
			}
			
			
			
			$(".dus").bind("click",function(){
				$(this).find("i").addClass("icon-" + icon15[0]);
				$(".reset").show();
			});
			
			$(".reset").bind("click",function(){
				start();
				$(".dus i").removeClass().addClass("icon-5x");
				$(".reset").hide();
			});
			
		};
		
		
		
	</script>
	
	
	
</html>
